<template>
  <div p-5>
    <DynamicTable
      ref="dynamicTableRef"
      bordered
      :data-request="loadData"
      :columns="columns"
      row-key="heroid"
      :scroll="{
        y: 'calc(100vh - 360px)',
      }"
    >
      <template #toolbar>
        <a-button type="primary" @click="register"> 立案 </a-button>
      </template>
    </DynamicTable>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { cmColumns, type TableColumnItem } from './columns';
  import { useTable } from '@/components/core/dynamic-table';
  import {
    deleteCaseInfo,
    getSelectAreaList,
    getCaseInfoList,
  } from '@/api/administrativePenalty/case-management';
  import router from '@/router';
  import { Modal } from 'ant-design-vue';

  const [DynamicTable, dynamicTableInstance] = useTable();

  const register = () => {
    router.push({ path: '/administrative-penalty/registers' });
  };

  //区域相关
  const countyOptions = ref([] as any);
  const townOptions = ref([] as any);

  const areaFieldNames = {
    label: 'name',
    value: 'id',
  };

  const loadData = async (params): Promise<API.TableListResult> => {
    if (params.rangePicker && params.rangePicker !== null) {
      params.startTime = params.rangePicker[0];
      params.endTime = params.rangePicker[1];
      delete params['rangePicker'];
    }

    params.caseType = 1;
    const data = await getCaseInfoList(params);
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  /**
   * @description 表格删除行
   */
  const delRowConfirm = async (id: string) => {
    Modal.confirm({
      title: '确定要删除所选的案件吗?',
      icon: '',
      onOk: async () => {
        await deleteCaseInfo(id).finally(dynamicTableInstance?.reload);
      },
    });
  };

  const columns: TableColumnItem[] = [
    ...cmColumns,
    {
      title: '机构名称',
      dataIndex: 'countyCode',
      hideInTable: true,
      formItemProps: {
        component: 'Select',
        labelWidth: 65,
        colProps: {
          style: 'width: 240px',
        },
        componentProps: ({ formModel, formInstance }) => {
          return {
            placeholder: '请选择区域',
            options: countyOptions.value,
            fieldNames: areaFieldNames,
            autocomplete: 'off',
            disabledLabelWidth: true,
            onChange: (e: any) => {
              countyOptions.value.map((item) => {
                if (item.id == e) {
                  townOptions.value = item.children;
                }
              });
              formModel.townCode = undefined;
              const { updateSchema } = formInstance;
              updateSchema({
                field: 'townCode',
                componentProps: {
                  options: townOptions.value,
                },
              });
            },
          };
        },
      },
    },
    {
      title: '',
      dataIndex: 'townCode',
      hideInTable: true,
      formItemProps: {
        component: 'Select',
        labelWidth: 10,
        colProps: {
          style: 'width: 175px',
        },
        componentProps: () => {
          return {
            placeholder: '请选择街道',
            options: [],
            fieldNames: areaFieldNames,
            autocomplete: 'off',
            disabledLabelWidth: true,
          };
        },
      },
    },
    {
      title: '操作',
      align: 'left',
      width: 140,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '查看',
          onClick: () =>
            router.push({
              path: '/administrative-penalty/spotView',
              query: { id: record.id },
            }),
        },
        {
          label: '编辑',
          ifShow: record.editShowFlag == 1,
          onClick: () =>
            router.push({
              path: '/administrative-penalty/registers',
              query: { id: record.id },
            }),
        },
        {
          label: '处理',
          ifShow: record.handleShowFlag == 1,
          onClick: () =>
            router.push({
              path: '/administrative-penalty/spotHandle',
              query: { id: record.id },
            }),
        },
        {
          label: '删除',
          ifShow: record.deleteShowFlag == 1,
          onClick: () => delRowConfirm(record.id),
        },
      ],
    },
  ];

  onMounted(async () => {
    const res_area = await getSelectAreaList();
    if (res_area.code === 0) {
      countyOptions.value = res_area.data[0].children;
      countyOptions.value.map((item) => {
        townOptions.value = item.children;
      });
    }
  });
</script>

<style lang="less" scoped></style>
